<template>
  <el-dialog
    v-model="KPOpen"
    append-to-body
    title="卡派轨迹管理"
    :close-on-click-modal="false"
  >
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleAdd">增加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
         
          :disabled="single"
          type="success"
          @click="handleEdit"
        >
          修改
        </el-button>
      </el-col>
    </el-row>
    <el-table
      ref="dragTable"
      v-loading="loading"
      :data="tableList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        label="原始轨迹"
        prop="description"
        width=""
        align="center"
      />
      <el-table-column
        label="日期"
        prop="day"
        align="center"
        width=""
      />
      <el-table-column
        label="操作人"
        prop="name"
        align="center"
        width=""
      />
      <el-table-column
        label="轨迹内容"
        prop="operableTrack"
        align="center"
        width=""
      />
      <el-table-column
        label="备注"
        prop="remarks"
        align="center"
        width=""
        show-overflow-tooltip
      />
    </el-table>
    
    <el-dialog v-model="open2" :title="title2" :before-close="cancle2">
      <el-form
        ref="forms"
        :model="form"
        inline
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="邮件号" prop="mailNum">
          <el-input v-model="form.mailNum"></el-input>
        </el-form-item>
        <el-form-item label="订单号" prop="orderNum">
          <el-input v-model="form.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="eventTime">
          <el-date-picker
            v-model="form.eventTime"
            type="datetime"
            value-format="YYYY-MM-DD"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="时区" prop="eventTimeZone">
          <el-input v-model="form.eventTimeZone"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="eventStatus">
          <el-select v-model="form.eventStatus" filterable>
            <el-option
              v-for="dict in dicts[DictDirection.卡派轨迹状态]"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息类型" prop="type">
          <el-select v-model="form.type" filterable>
            <el-option
              v-for="dict in dicts[DictDirection.信息类型]"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件描述" prop="eventDesc">
          <el-input v-model="form.eventDesc"></el-input>
        </el-form-item>
        <el-form-item label="发生国家" prop="eventCountry">
          <el-input v-model="form.eventCountry"></el-input>
        </el-form-item>
        <el-form-item label="发生城市" prop="eventCity">
          <el-input v-model="form.eventCity" @blur="form.eventCity = form.eventCity.toString().trim()"></el-input>
        </el-form-item>
        <el-form-item label="处理机构名称" prop="dealOrgName">
          <el-input v-model="form.dealOrgName"></el-input>
        </el-form-item>
        <el-form-item label="处理机构英文名" prop="dealOrgEnName">
          <el-input v-model="form.dealOrgEnName"></el-input>
        </el-form-item>
        <el-form-item label="处理机构电话" prop="dealOrgPhone">
          <el-input v-model="form.dealOrgPhone"></el-input>
        </el-form-item>
        <el-form-item label="目的地城市" prop="destCity">
          <el-input v-model="form.destCity"></el-input>
        </el-form-item>
        <el-form-item label="寄件城市" prop="senderCity">
          <el-input v-model="form.senderCity"></el-input>
        </el-form-item>
        <el-form-item label="收件城市" prop="receiverCity">
          <el-input v-model="form.receiverCity"></el-input>
        </el-form-item>
        <el-form-item label="签收人名称" prop="signerName">
          <el-input v-model="form.signerName"></el-input>
        </el-form-item>
        <el-form-item label="投递失败原因" prop="undeliveryCause">
          <el-input v-model="form.undeliveryCause" type="textarea" :autosize="{ minRows: 2 }"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" :loading="btnLoading" @click="submit2">确定</el-button>
        <el-button @click="cancle2">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script lang="ts" setup>
// import { Delete, Refresh, Plus, Download, Edit, Document } from '@element-plus/icons-vue';
import { ref, getCurrentInstance, defineAsyncComponent, defineProps, defineExpose } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { fedexOrderNo, pushEmsTrack } from '@/api/expressManager/orderList'
import useDicts, { DictDirection } from '@/store/modules/dicts'

const dicts = useDicts()
dicts.setDicts(DictDirection.卡派轨迹状态)
dicts.setDicts(DictDirection.信息类型)
const // 选中数组
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  KPOpen = ref(false),
  {
    appContext: {
      config: {
        globalProperties: { $validateForm },
      },
    },
  } = getCurrentInstance()
const tableList = ref([])

const rules = {
  mailNum: [{ required: true, message: '必填', trigger: 'blur' }],
  orderNum: [{ required: true, message: '必填', trigger: 'blur' }],
  eventTime: [{ required: true, message: '必填', trigger: 'blur' }],
  eventTimeZone: [{ required: true, message: '必填', trigger: 'blur' }],
  dealOrgName: [{ required: true, message: '必填', trigger: 'blur' }],
  eventStatus: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  type: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
}
const { proxy } = getCurrentInstance() as any

const loading = ref(false)
const btnLoading = ref(false)
const dragTable = ref(null)
const open2 = ref(false)
const title2 = ref(null)
const forms = ref(undefined)
const form = ref({
  mailNum: '',
  orderNum: '',
  eventTime: '',
  eventTimeZone: '',
  eventStatus: '',
  type: '',
  eventDesc: '',
  eventCountry: '',
  eventCity: '',
  dealOrgName: '',
  dealOrgEnName: '',
  dealOrgPhone: '',
  destCity: '',
  senderCity: '',
  receiverCity: '',
  signerName: '',
  undeliveryCause: '',
})
const days = ref([])
const handleEdit = () => {
  open2.value = true
  title2.value = '修改轨迹'
  proxy.form.type = 'U'
  proxy.form.eventTime = days.value[0]
}
const handleAdd = () => {
  open2.value = true
  title2.value = '新建轨迹'
  proxy.form.type = ''
  proxy.form.eventTime = ''
  proxy.form.orderNum = ''
}

const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  single.value = rows.length != 1
  multiple.value = !rows.length
  days.value = rows.map((item) => item.day)
}
const submit2 = () => {
  $validateForm(forms.value, () => {
    btnLoading.value = true
    const data = form.value
    pushEmsTrack(data).then(res => {
      if (res.code == 200) {
        if (title2.value == '修改轨迹') {
          ElMessage.success('修改成功')
        }
        if (title2.value == '新建轨迹') {
          ElMessage.success('新增成功')
        }
        cancle2()
        getList()
        btnLoading.value = false
      } else {
        ElMessage.error(res.msg)
        btnLoading.value = false
      }
    }).finally(() => {
      btnLoading.value = false
    })
  })
}
const cancle2 = () => {
  open2.value = false
  proxy.$refs.forms.resetFields()
}
const selfOrderNos = ref([])
const getList = () => {
  loading.value = true
  const OrderNos = selfOrderNos.value
  proxy.form.orderNum = selfOrderNos.value
  fedexOrderNo(OrderNos).then(res => {
    proxy.tableList = res.data
    loading.value = false
  }).catch(err => {
    console.log(err)
    loading.value = false
  })
}
defineExpose({
  KPOpen,
  selfOrderNos,
  getList,
})
</script>
<style lang="less" scoped>
/deep/.el-form-item__content {
  width: 200px;
}
</style>